Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-transition-group

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-transition-group

A react component toolset for managing animations

2.9.0
Source
npm

Version published: 6 years ago

Weekly downloads: 13M; increased by3.47%

Maintainers: 1

Weekly downloads

Created: 8 years ago

What is react-transition-group?

The react-transition-group package provides a way to perform animations and transitions in React applications. It offers components that manage the lifecycle of entering and leaving the DOM, allowing developers to animate these changes.

What are react-transition-group's main functionalities?

Transition

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. The 'in' prop is used to toggle the visibility of the component.

import { Transition } from 'react-transition-group';

<Transition in={this.state.show} timeout={300}>
  {state => (
    <div className={`fade fade-${state}`}>{this.props.children}</div>
  )}
</Transition>

CSSTransition

The CSSTransition component is a wrapper around the Transition component that lets you define enter and exit transitions using CSS class names. It's useful when you want to apply a set of CSS transitions to a single entering or leaving element.

import { CSSTransition } from 'react-transition-group';

<CSSTransition in={this.state.show} timeout={300} classNames='fade'>
  <div>{this.props.children}</div>
</CSSTransition>

TransitionGroup

The TransitionGroup component manages a set of transition components (like CSSTransition) in a list. When items are added or removed from the list, the TransitionGroup will trigger the enter or exit states for those items.

import { TransitionGroup, CSSTransition } from 'react-transition-group';

<TransitionGroup>
  {this.state.items.map(item => (
    <CSSTransition key={item.id} timeout={500} classNames='item'>
      <div>{item.text}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

SwitchTransition

The SwitchTransition component is used to transition between two elements that switch out with each other. It's useful for transitioning between two components that enter and leave at the same time, like routes or toggling views.

import { SwitchTransition, CSSTransition } from 'react-transition-group';

<SwitchTransition>
  <CSSTransition key={this.state.mode} addEndListener={(node, done) => node.addEventListener('transitionend', done, false)} classNames='fade'>
    <div>{this.state.status}</div>
  </CSSTransition>
</SwitchTransition>

Other packages similar to react-transition-group